<template>
    <div class="flex gap-2">
        <el-tag style="cursor: pointer;" size="large" v-for="tag in tags" :key="tag.name" @click="tap(tag)"
            :closable="tags.length > 1" :type="tag.type" @close="handleClose(tag)">
            {{ tag.name }}
        </el-tag>
    </div>
</template>

<script setup>
import { useMenu } from '@/store/menu';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
const menu = useMenu()
const router = useRouter()
const handleClose = (tag) => {
    // 选中的tag是primary且不是第一个的时候，把前一个设置为primary，如果是第一个则把后一个设置成primary
    if (tag.type === 'primary' && menu.meunList.indexOf(tag) !== 0) {
        // 将前一个tag的type设置为primary
        menu.meunList[menu.meunList.indexOf(tag) - 1].type = 'primary';
    }else if (tag.type === 'primary' && menu.meunList.indexOf(tag) === 0) {
        // 如果是第一个则将后一个tag的type设置为primary
        // 将后一个tag的type设置为primary
        menu.meunList.splice(menu.meunList.indexOf(tag), 1);
        menu.meunList[menu.meunList.indexOf(tag) + 1].type = 'primary';
    }
    const index = menu.meunList.indexOf(tag)
    menu.meunList.splice(index, 1)
    // 删除后需要触发跳转到目前type是primary的tag
    // 先找到当前type是primary的tag
    const primaryTag = menu.meunList.find(tag => tag.type === 'primary')
    router.push(primaryTag.path)
    router.clearRoutes()
}
const cancelSelected = () => {
    // 将其他tag的type变成info
    menu.meunList.forEach(tag => {
        tag.type = 'info'
    })
}
const tap = (tag) => {
    // 点击后改变颜色，改变颜色之前需要把之前的type设置为info，并且跳转到相应的路由页面
    cancelSelected()
    router.push(tag.path)
}
const route = useRoute()
const tags = ref(menu.meunList)

watch(() => route.fullPath, (newValue, oldValue) => {
    cancelSelected()
    // 判断当前的menuList中是否有当前路由的path
    if (menu.meunList.find(tag => tag.path === newValue)) {
        // 如果有则将type设置为primary
        menu.meunList.find(tag => tag.path === newValue).type = 'primary'
        return
    }
    menu.addMenuList({ name: route.meta.title, type: 'primary',path: route.fullPath })
})
</script>

<style scoped>
.flex{
    display : flex;
}
.gap-2{
    gap: 5px;
}
</style>